<template>
  
  <div>
    <ul>
      <!-- 柱状图 -->
      <li>
        <div id="barchart" class="chart"></div>
      </li>
      <!-- 雷达图 -->
      <li>
        <div id="radarchart" class="chart"></div>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

</template>

<script>
export default {
  data() {
    return {
      // 柱状图
      barchart: {
        title: {
          text: 'bar chart',
          x:'left',
          y:'top',
        },
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          right:'0px',
          top:'0px',
          feature: {
            saveAsImage: {
              show:true,
              title:'保存为图片'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: ['一', '二', '三', '四', '五', '六', '日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      },
      // 雷达图
      radarchart: {
        title: {
          text: 'Radar Chart',
          x:'left',
          y:'top'
        },
        tooltip: {
          show:true,
          trigger: 'item'
        },
        toolbox: {
          x:'right',
          y:'top',
          feature: {
            saveAsImage: {
              show:true,
              title:'保存为图片'
            }
          }
        },
        legend: {
          data: ['指标1', '指标2','指标3','指标4','指标5','指标6','指标7'],
          orient: 'vertical',
          height:'200px',
          type:'scroll',
          x:'right',
          y:'bottom',
          padding:0,
          itemWidth:15

        },
        radar: {
          shape: 'circle',
          indicator: [
            { name: '维度1', max: 6500 },
            { name: '维度2', max: 16000 },
            { name: '维度3', max: 30000 },
            { name: '维度4', max: 38000 },
            { name: '维度5', max: 52000 },
            { name: '维度6', max: 25000 }
          ]
        },
        series: [
          {
            name: '指标对比',
            type: 'radar',
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '指标1'
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '指标2'
              },
              {
                value: [6000, 14000, 28000, 26000, 42000, 21000],
                name: '指标3'
              },
              {
                value: [5000, 12000, 28000, 26000, 42000, 21000],
                name: '指标4'
              },
              {
                value: [5000, 14000, 21000, 26000, 42000, 21000],
                name: '指标5'
              },
              {
                value: [5000, 14000, 18000, 26000, 42000, 21000],
                name: '指标6'
              },
              {
                value: [5000, 14000, 28000, 20000, 42000, 21000],
                name: '指标7'
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    // 初始化具体图表
    initBarChart(){
      this.initChart('#barchart',this.barchart)
    },
    initRadarChart(){
      this.initChart('#radarchart',this.radarchart)
    },

    // 初始化某类图表
    initChart(IdSelector,option){
      this.$echarts.init(document.querySelector(IdSelector)).setOption(option)

    },
    
    // 初始化所有图表
    initAllChart() {
      this.initBarChart()
      this.initRadarChart()
    }
  },
  mounted() {
    this.initAllChart()
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
  width: 1200px;
  margin: 0 auto;
}

li {
  display: inline-block;
  /* width: 400px; */
  width: 33%;
  height: 300px;
  padding: 2px;
  border: 1px solid black;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>